<template>
  <div>
    <div id="allmap">百度地图</div>
  </div>
</template>
<script>
import MP from "@/components/Index/MapComponent.js";
import { map_init } from "@/utils/bmap.js";
export default {
  data() {
    return {
      listData: [
        {
          id: 12, //设备id
          name: "华侨大厦设备", //设备名字
          monthSale: 24, //月售
          distance: 125, // 距离多远 单位:m
          placeAddress: "皇姑区鸭绿江街123号", // 地址
          placeLongitude: "123.447559", //坐标
          placeLatitude: "41.823735" //坐标
        },
        {
          id: 13,
          name: "景洪城市之心设备",
          monthSale: 324, //月售
          distance: 125, // 距离多远 单位 m
          placeAddress: "皇姑区崇山路156号",
          placeLongitude: "123.43103",
          placeLatitude: "41.844965"
        },
        {
          id: 13,
          name: "中医药大学设备",
          monthSale: 54, //月售
          distance: 233, // 距离多远 单位 m
          placeAddress: "中医药大学156号",
          placeLongitude: "123.435989",
          placeLatitude: "41.839537"
        }
      ]
    };
  },
  name: "MapBai",
  mounted() {
    this.$nextTick(function() {
      MP("4HGTlD4cWwWQbqLMmIxaIrMsPzPvXdBA").then(BMap => {
        var map = new BMap.Map("allmap"); // 创建Map实例
        //var point = new BMap.Point(116.404, 39.915); // 创建点坐标  北京
        var point = new BMap.Point(123.460867, 41.856638); // 创建点坐标 富丽阳光
        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom();

        map_init(
          map,
          {
            id: "allmap",
            placeLongitude: "123.43103",
            placeLatitude: "41.844965",
            listData: [
              {
                id: 12, //设备id
                name: "华侨大厦设备", //设备名字
                monthSale: 24, //月售
                distance: 125, // 距离多远 单位:m
                placeAddress: "皇姑区鸭绿江街123号", // 地址
                placeLongitude: "123.447559", //坐标
                placeLatitude: "41.823735" //坐标
              },
              {
                id: 13,
                name: "景洪城市之心设备",
                monthSale: 324, //月售
                distance: 125, // 距离多远 单位 m
                placeAddress: "皇姑区崇山路156号",
                placeLongitude: "123.43103",
                placeLatitude: "41.844965"
              },
              {
                id: 13,
                name: "中医药大学设备",
                monthSale: 54, //月售
                distance: 233, // 距离多远 单位 m
                placeAddress: "中医药大学156号",
                placeLongitude: "123.435989",
                placeLatitude: "41.839537"
              }
            ]
          },
          this
        );
      });
    });
    /**
     * 获取页面的高度
     * 让地图占满页面的高度
     */
    let pageH = window.innerHeight;
    console.log("pageH--->", pageH);
    document.getElementById("allmap").style.height = pageH + "px";
  },
  updated() {
    this.$nextTick(function() {
      MP("4HGTlD4cWwWQbqLMmIxaIrMsPzPvXdBA").then(BMap => {
        var map = new BMap.Map("allmap"); // 创建Map实例
        //var point = new BMap.Point(116.404, 39.915); // 创建点坐标  北京
        var point = new BMap.Point(123.460867, 41.856638); // 创建点坐标 富丽阳光
        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom();

        map_init(
          map,
          {
            id: "allmap",
            placeLongitude: "123.43103",
            placeLatitude: "41.844965",
            listData: [
              {
                id: 12, //设备id
                name: "华侨大厦设备", //设备名字
                monthSale: 24, //月售
                distance: 125, // 距离多远 单位:m
                placeAddress: "皇姑区鸭绿江街123号", // 地址
                placeLongitude: "123.447559", //坐标
                placeLatitude: "41.823735" //坐标
              },
              {
                id: 13,
                name: "景洪城市之心设备",
                monthSale: 324, //月售
                distance: 125, // 距离多远 单位 m
                placeAddress: "皇姑区崇山路156号",
                placeLongitude: "123.43103",
                placeLatitude: "41.844965"
              },
              {
                id: 13,
                name: "中医药大学设备",
                monthSale: 54, //月售
                distance: 233, // 距离多远 单位 m
                placeAddress: "中医药大学156号",
                placeLongitude: "123.435989",
                placeLatitude: "41.839537"
              }
            ]
          },
          this
        );
      });
    });
    /**
     * 获取页面的高度
     * 让地图占满页面的高度
     */
    let pageH = window.innerHeight;
    console.log("pageH--->", pageH);
    document.getElementById("allmap").style.height = pageH + "px";
  }
};
</script>
<style scoped>
#allmap {
  width: 100vw;
  height: 100vw;
  margin: 0;

  font-family: "微软雅黑";
  z-index: 50;
}
</style>
